<template>
    <div class="lottery page">
        <div class="turntable">
                <div class="turn" :style="{transform:`rotate(${roll}deg)`,transition:transition}">
                    <img :src="turnBg">
                </div>
            <img class="hand" src="./image/hand.png" @click="startLottery">
<!--            <div class="chance" @click="startLottery">{{num||'0'}}次机会</div>-->
        </div>
        <div class="tips">  </div>
<!--        <div class="btn">-->
<!--            <img class="myPresent" src="./image/getChance.png" @click="getCount">-->
<!--            <img class="myPresent" src="./image/myPresent.png" @click="showDetail">-->
<!--        </div>-->
<!--        <div class="price" v-if="show">-->
<!--            <div class="title">我的中奖记录</div>-->
<!--            <div class="form">-->
<!--                <div class="scroll">-->
<!--                    <div class="tableName">-->
<!--                        <span class="Tname">奖品</span>-->
<!--                        <span class="Tprice">兑换码</span>-->
<!--                    </div>-->
<!--                    <cube-scroll-->
<!--                            ref="scroll"-->
<!--                            :data="priceList"-->
<!--                            :options="options"-->
<!--                            @pulling-up="getLotteryList"-->
<!--                    >-->
<!--                        <div class="tableCell" :class="'code'+index" v-for="(item,index) in priceList" :key="index" @click="copy(index,item.goodsId)" :data-clipboard-text="item.lotteryCode">-->
<!--&lt;!&ndash;                            <span class="Tname">{{item.time?item.time.split(' ')[0]:''}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                            <span class="Tprice">{{item.goodsName}}</span>&ndash;&gt;-->
<!--                            <span class="Tname">{{item.goodsName}}</span>-->
<!--                            <span class="Tprice" >{{item.lotteryCode}}</span>-->
<!--                        </div>-->
<!--                    </cube-scroll>-->
<!--                </div>-->
<!--            </div>-->
<!--            <img src="./image/iknow.png" @click="()=>{-->
<!--                this.show=false-->
<!--                this.page=1-->
<!--                this.priceList = []-->
<!--            }">-->
<!--        </div>-->
    </div>
</template>

<script>
    import {showAlert} from "../../dialog";
    import {getLotteryBg,getLotteryCount,startLottery,getLotteryList,getNum} from '@/api/lottery'
    import {showLoading, hide, showError} from "../../toast";
    import ClipboardJS from "clipboard";
    import {mapState} from "vuex"
    export default {
        name: "lottery",
        data(){
            return{
                userInfo: null,
                roll:null,
                flag:true,
                show:false,
                priceList:[],
                options:{pullUpLoad: true},
                num:null,
                transition:'all 8s ease-out',
                turnBg:null,
                amount:null,
                id:null,
                goodsName:null,
                page:1,
                goodsId:null
            }
        },
        computed:{
            imgH() {
                return process.env.VUE_APP_IMG_DOMAIN
            },
            ...mapState({
                "userId":state=>state.user.user.userId
            })
        },
        activated() {
            // this.$createDialog({
            //     type: 'alert',
            //     title: '提示',
            //     content: '抽奖还未开始，点击确认后返回首页',
            //     icon: 'cubeic-alert',
            //     onConfirm:()=>{
            //         this.$router.push({
            //             path:`/home`
            //         })
            //     }
            // }).show()

            getLotteryBg(this.$route.query.actId).then(res=>{
                this.turnBg = this.imgH+res.data.actImg
                this.amount = res.data.amount
                this.num = res.extra.count
                this.id = res.data.id
            })
            // getNum().then(res=>{
            //     this.num = res.data
            // })
            this.flag = true
        },
        methods:{
            startLottery(){
                if (!this.flag){return}
                this.flag=false
                setTimeout(()=>{
                    this.flag = true
                },9000)
                if (this.num<1){
                    showError('您的抽奖机会不足')
                    return
                }
                showLoading('正在加载')
                startLottery(this.$route.query.actId,this.$route.query.recordId).then(res=>{
                    if (res.code==10000){
                        this.num--
                    }else {
                        hide()
                        return
                    }
                    this.goodsName = res.data.name
                    this.goodsId = res.data.goodsId
                    this.userInfo = res.extra.userInfo
                    this.rotate(res.data.deg,res.data.weight)
                    hide()

                })

            },
            rotate(deg,weight){
                let side = this.roll%360
                this.roll += Math.floor(Math.random()*10+8)*360+(deg-weight*Math.random()*45)-side
                setTimeout(()=>{
                    this.flag = true
                    // if (this.goodsId){
                    //     let title = '恭喜您抽中'+this.goodsName
                    // }
                    this.$createDialog({
                        type: 'alert',
                        title: '恭喜'+this.userInfo+'抽中'+this.goodsName,
                        content: '请在抽奖明细中领取奖品',
                        icon: 'cubeic-alert',
                        onConfirm:()=>{
                            this.$router.push({
                                path:'/lottery/detail'
                            })
                        }
                    }).show()
                },8500)
                // let rolling = setInterval(()=>{
                //     let deg = Math.floor(Math.random()*10+3)*360-45*index-Math.random()*45
                //     if (this.roll>=deg/2){
                //         clearInterval(rolling)
                //         let rollling = setInterval(()=>{
                //             if (this.roll>=deg-1){
                //                 clearInterval(rollling)
                //                 setTimeout(()=>{
                //                     showAlert('23333')
                //                     this.flag=true
                //                 },500)
                //             }
                //             this.roll++
                //         },10)
                //     }
                //     this.roll++
                // },1)
            },
            // showDetail(){
            //     getLotteryList(this.page).then(res=>{
            //         console.log(res)
            //         this.priceList = this.priceList.concat(res.data)
            //         this.show = true
            //         this.page++
            //         this.$nextTick(()=>{
            //             this.$refs.scroll.refresh()
            //         })
            //     })
            //
            // },
            // getCount(){
            //     // getLotteryCount(this.id).then(res=>{
            //     //     this.num = res.data.amount
            //     // })
            //     // showAlert("请购买活动商品获取抽奖资格")
            //     // /goodslist?name=29.9体验装&ways=search
            //
            //     this.$createDialog({
            //         type: 'alert',
            //         title: '提示',
            //         content: '请购买活动商品获取抽奖资格,点击确定后跳转活动商品列表',
            //         icon: 'cubeic-alert',
            //         onConfirm:()=>{
            //             this.$router.push({
            //                 path:'/goodslist?type=0&saletype=2'
            //             })
            //         }
            //     }).show()
            // },
            // getLotteryList(){
            //     getLotteryList(this.page).then(res=>{
            //         this.priceList = this.priceList.concat(res.data)
            //         this.page++
            //     })
            // },
            copy(index,id){
                let cla = '.code'+index
                let clipboard = new ClipboardJS(cla);
                clipboard.on('success',  (e)=> {
                    e.clearSelection()
                    this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '复制兑换码成功,点击确定后跳转至兑换商品页面',
                        icon: 'cubeic-alert',
                        onConfirm:()=>{
                            this.$router.push({
                                path:'/goodslist?type=0&saletype=16'
                            })
                        }
                    }).show()
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
    .lottery
        height 100%
        background-color: #f5f5f5
        background url("./image/bg.png") no-repeat
        background-size 100%
        .turntable
            width: 276.67px
            height: 276.67px
            margin-top 246px
            margin-left 46px
            .turn
                width: 100%
                height 100%
                background-repeat no-repeat
                background-size 100%
                position relative
                img
                    width 100%
                    height 100%
                /*.present
                    position absolute
                    width: 100%
                    height 100%
                    text-align center
                    !*transform-origin *!
                    .word
                        margin-top 20px
                        color: #462E2E
                        font-size 13px
                    img
                        margin-top 10px
                        width: 43px
                        height: 25px*/
            .hand
                position absolute
                width: 90.66px
                top: 302.33px
                left 139.66px
            .chance
                position absolute
                color #A6342E
                font-size 12px
                top 386.66px
                display block
                left 0
                right 0
                text-align center
        .tips
            color: #7FF4E6;
            font-size 15px
            text-align center
            margin-top 50px
        .btn
            display flex
            justify-content space-around
        .myPresent
            width: 155px
            margin-top 20px
            height 50px
        .price
            background url("./image/pricebg.png") no-repeat
            background-size 100%
            position fixed
            z-index 233
            width: 303.66px
            height: 436.33px
            top: 91px
            left 36px
            .title
                color #00C3BD
                font-size 17.58px
                text-align center
                margin-top 83.33px
            img
                width: 228px
                margin-left 41.66px
            .form
                padding-top 22px
                height 200px
                width: 250px
                margin-left 30px
                margin-bottom 48px
                .scroll
                    height 100%
                    width: 100%
                    .tableName
                        display flex
                        justify-content space-around
                        color #656565
                        font-size 13px
                        padding-bottom 5px
                    .tableCell
                        padding-top 5px
                        display flex
                        justify-content space-between
                        color #656565
                        font-size 13px
                        margin-bottom 5px
                        span
                            text-align center
                            white-space: nowrap
                            text-overflow: ellipsis
                            overflow: hidden
                            word-break: break-all
                    .Tname
                        flex 0.3
                        text-align center
                    .Tprice
                        flex 0.7
                        text-align center



</style>
